<template>
    <div class="TaskWarp" :class="{teachDivMain:BeginTeaching}">
        <div class="divMain listenTEXT"
             @click.stop>
            <div class="divTitle">
                <h2>{{Questions.child.QuestionRemark}}</h2>
            </div>
            <div class="tigan"
                 v-html="listenTEXTtigan(Questions.child,Questions.child.stem)"></div>
            <div :style='{top:divContentTop}'
                 class="divContent">
                <div class="touchMove"
                     @touchstart="TOUCHMOVE" @mousedown="TOUCHMOVE">
                    下拉显示更多{{divContentTop}}
                </div>
                <div class="boxContent">
    
                    <swiper class="swiperCont"
                            :options="swiperOption">
                        <div class="swiper-pagination"
                             slot="pagination"></div>
    
                        <swiper-slide class="swiperItem"
                                      v-for="(val,i) in Questions.child.stem"
                                      v-if="isShowChild(Questions.child,val)"
                                      :key="val">
                            <div class="LianXianWarp">
                                <div class="show topBottom cb">
                                    <div class="showtop">
                                        <span :style="showitemLineheight()"
                                              v-for="(item,index) in val.opts"
                                              v-if="index%2 == 0"
                                              class="showitem"
                                              v-html="item.OptionContent">
                                                                                <i></i>
                                                                            </span>
                                    </div>
                                    <div class="showbottom">
                                        <span :style="showitemLineheight()"
                                              v-for="(item,index) in val.opts"
                                              v-if="index%2 == 1"
                                              class="showitem"
                                              v-html="item.OptionContent">
                                                                                <i></i>
                                                                            </span>
                                    </div>
                                </div>
                            </div>
                        </swiper-slide>
    
                    </swiper>
    
                </div>
            </div>
        </div>
        <div class="Close" v-show="!BeginTeaching"
             style="z-index: 1">
            <i class="el-icon el-icon-close"></i>
        </div>
        <transition enter-active-class="animated zoomIn">
            <bigImg :imgSrc="bigImgInfo"
                    v-if="bigImgInfo.src != ''"></bigImg>
        </transition>

    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
    name: "listenTEXT",
    props: ["Questions"],
    computed: {
        ...mapGetters([
            'divContentTop',
            'BeginTeaching'
        ]),
    },
    methods: {
        ...mapActions([
            'TOUCHMOVE'
        ]),
        listenTEXTtigan(child, stem) {
            for (let i = 0; i < stem.length; i++) {
                if (stem[i].QuestionTypeCode == child.QuestionTypeCode) {
                    return stem[i].StemContent
                }
            }
        },
        isShowChild(child, stem) {
            if (stem.QuestionTypeCode == child.QuestionTypeCode) {
                return false
            } else {
                return true
            }
        },
        showitemLineheight() {
            return {
                'line-height': $('.showitem').height() + 'px'
            }
        },
        itemLineHeight() {
            return {
                lineHeight: $('.showitem').height() + 'px'
            }
        },
    },
    mounted() {
        var _this = this;



        $('.listenTEXT audio').each(function () {
            $(this).upAudioSrc()
        })

        $('.LianXianWarp').height(parseFloat($('.LianXian').height()) - 80)
        window.onresize = function () {
            $('.LianXianWarp').height(parseFloat($('.LianXian').height()) - 80)
        }
        $('.showitem p').css({
            lineHeight:$('.showitem p').height()+'px'
        })

        $('.showitem img').each(function () {
            $(this).upImgSrc()
            $(this).on('dblclick', function () {
                _this.bigImgInfo.src = $(this).attr('src')
            })
        })


        $('.divContent').height(parseFloat($('.listenTEXT').height()) - 80)
        $('.boxContent').height(parseFloat($('.divContent').height()) - 56)
        window.onresize = function () {
            $('.divContent').height(parseFloat($('.listenTEXT').height()) - 80)
            $('.boxContent').height(parseFloat($('.divContent').height()) - 56)
            $('.divItem').css({
                lineHeight: $('.divItem').height() + 'px'
            })
            $('.showitem p').css({
                lineHeight:$('.showitem p').height()+'px'
            })
            $('.showitem').css({
                'line-height': $('.showitem').height() + 'px'
            })
        }
    },
    data() {
        return {
            bigImgInfo: {
                src: ''
            },
            swiperOption: {
                // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                notNextTick: true,
                // swiper configs 所有的配置同swiper官方api配置
                pagination: '.swiper-pagination',
                slidesPerView: 1,
                paginationClickable: true,
                spaceBetween: 30,
                loop: true
            }
        }
    }
}


</script>

<style lang="scss" rel="stylesheet/scss">
.TEXTOpts {
    display: inline;
    height: 100%;
    p {
        display: inline;
    }
    img {
        height: 100%;
    }
}

.smallTtigan {
    line-height: 60px;
    height: 60px;
    overflow: hidden;
}

@import '../../../assets/css/public.scss';

.showbottom .showitem p {
    display: block;
    width: 100%;
    height: 100%;
    img {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.show.topBottom .showitem {
    box-shadow: $boxShadow;
}

.showitem {
    width: 20%;
    height: 50%;
    margin: 0 10px;
    p{
        height: 100%;
    }
    img{
        width: 100%;
        height: 100%;
    }
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
@import '../../../assets/css/public.scss';

.TaskWarp {
    height: 90%;
    width: 90%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    .divMain {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        .divTitle {
            height: 80px;
            background: #fff;
            position: relative;
            box-shadow: 0 10px 20px 2px rgba(197, 208, 218, 0.8);
            h2 {
                font-size: 20px;
                line-height: 80px;
                color: #56545A;
            }
        }
        .tigan {
            font-size: 24px;
            background: #D4D7D9;
            line-height: 2em;
            min-height: 100%;
        }
        .divContent {
            background: #fff;
            position: absolute;
            top: 80px;
            left: 0;
            width: 100%;
            overflow: hidden;
            height: 100%;
            .touchMove {
                margin: 0 auto;
                width: 309px;
                height: 56px;
                font-size: 16px;
                background: #81a4ff;
                border-radius: 0 0 8px 8px;
                line-height: 56px;
                text-align: center;
                color: #fff;
                font-weight: bold;
            }

            .swiperCont {
                height: 100%;
                .swiperItem {
                    height: 100%;
                    .LianXianWarp {
                        background: #fff;
                        position: relative;
                        height: 100%;
                        overflow: auto;
                        margin: 40px auto 0;
                        .show.topBottom {
                            height: 100%;
                            background: #F8FAFC;
                            .showtop,
                            .showbottom {
                                height: 50%;
                                display: flex;
                                flex-wrap: nowrap;
                                justify-content: center;
                                .showitem {
                                    background: #fff;
                                    border-radius: 15px;
                                    text-align: center;
                                    color: #000000;
                                    overflow: hidden;
                                    position: relative;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
